<template>
  <div>
    <!-- 头部 --state-->
    <div class="nav">
      <p>
        <span>.</span>
        {{ pgTitle }}
      </p>
      <!-- <p v-if="enterprise.id == 0">
        <span>.</span>
        新增客户
      </p>
      <p v-else-if="enterprise.id != 0">
        <span>.</span>
        编辑客户
      </p> -->
      <div id="nav_go4">
        <el-button
          type="info"
          icon="el-icon-back"
          class="btn_fanhui"
          @click="revert()"
        >返回
        </el-button
        >
      </div>
    </div>
    <!-- 头部 --end-->

    <div class="bigbox">
      <!-- 顶部盒子 -->
      <div class="customerxq_box1" :data="enterprise">
        <p>基本信息</p>
        <ul>
          <li>
            <span>企业编号</span>
            <el-input
              style="width: 55%"
              placeholder="请输入企业编号"
              v-model="enterprise.enterpriseNumber"
              :disabled="!edits"
            ></el-input>
          </li>
          <li>
            <span>企业名称</span>
            <el-input
              style="width: 55%"
              placeholder="请输入企业名称"
              v-model="enterprise.enterpriseName"
              :disabled="!edits"
            ></el-input>
          </li>
          <li>
            <span>企业地址</span>
            <el-input style="width: 55%" placeholder="请输入企业地址" v-model="enterprise.adress"
                      :disabled="!edits"></el-input>
          </li>
          <li>
            <span>合作年限</span>
            <el-input
              style="width: 55%"
              placeholder="请输入合作年限"
              v-model="enterprise.hezuoYear"
              :disabled="!edits"
            ></el-input>
          </li>
          <li>
            <span>合作状态</span>
            <el-select style="width: 55%"
                       placeholder="请选择合作状态"
                       v-model="enterprise.hezuoStatus"
                       :disabled="!edits">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </li>
          <li>
            <span>信用额度</span>
            <el-input
              style="width: 55%"
              placeholder="请输入信用额度"
              v-model="enterprise.xinyongMoney"
              :disabled="!edits"
            ></el-input>
          </li>
          <!--          <li>-->
          <!--            <span>到期欠款(元)</span>-->
          <!--            <el-input-->
          <!--              style="width: 55%"-->
          <!--              placeholder="请输入到期欠款"-->
          <!--              v-model="enterprise.debtExpire"-->
          <!--              :disabled="!edits"-->
          <!--            ></el-input>-->
          <!--          </li>-->
          <!--          <li>-->
          <!--            <span>未到期欠款(元)</span>-->
          <!--            <el-input-->
          <!--              style="width: 55%"-->
          <!--              placeholder="请输入未到期欠款"-->
          <!--              v-model="enterprise.debtNotDue"-->
          <!--              :disabled="!edits"-->
          <!--            ></el-input>-->
          <!--          </li>-->
          <!--          <li>-->
          <!--            <span>欠款总额(元)</span>-->
          <!--            <el-input-->
          <!--              style="width: 55%"-->
          <!--              placeholder="请输入欠款总额"-->
          <!--              v-model="enterprise.debtAllmoney"-->
          <!--              :disabled="!edits"-->
          <!--            ></el-input>-->
          <!--          </li>-->
          <li>
            <span>联系人</span>
            <el-input
              style="width: 55%"
              placeholder="请输入联系人"
              v-model="enterprise.contacts"
              :disabled="!edits"
            ></el-input>
          </li>
          <li>
            <span>联系方式</span>
            <el-input
              style="width: 55%"
              placeholder="请输入联系方式"
              v-model="enterprise.contactsPhone"
              :disabled="!edits"
            ></el-input>
          </li>
          <li>
            <span>职务</span>
            <el-input style="width: 55%" placeholder="请输入职务" v-model="enterprise.jop" :disabled="!edits"></el-input>
          </li>
        </ul>
      </div>
      <!-- 底部两个盒子 -->
      <div class="customerxq_box2">
        <!-- 底部左边盒子 -->
        <div class="box2_left_top" :data="enterprise">
          <p>开票信息</p>
          <ul>
            <li>
              <span>单位名称</span>
              <el-input
                style="width: 70%"
                placeholder="请输入单位名称"
                v-model="enterprise.kaipiaoDanwei"
                :disabled="!edits"
              ></el-input>
            </li>
            <li>
              <span>联系人</span>
              <el-input
                style="width: 70%"
                placeholder="请输入联系人"
                v-model="enterprise.kaipiaoContacts"
                :disabled="!edits"
              ></el-input>
            </li>
            <li>
              <span>单位地址</span>
              <el-input
                style="width: 70%"
                placeholder="请输入单位地址"
                v-model="enterprise.adress"
                :disabled="!edits"
              ></el-input>
            </li>
            <li>
              <span>联系方式</span>
              <el-input
                style="width: 70%"
                placeholder="请输入联系方式"
                v-model="enterprise.kaipiaoContactsphone"
                :disabled="!edits"
              ></el-input>
            </li>
            <li>
              <span>开户行</span>
              <el-input
                style="width: 70%"
                placeholder="请输入开户行"
                v-model="enterprise.kaipiaoKaihuhang"
                :disabled="!edits"
              ></el-input>
            </li>
            <li>
              <span>开户账号</span>
              <el-input
                style="width: 70%"
                placeholder="请输入开户账号"
                v-model="enterprise.kaipiaoKaihuaccount"
                :disabled="!edits"
              ></el-input>
            </li>
            <li>
              <span>纳税人识别号</span>
              <el-input
                style="width: 70%"
                placeholder="请输入纳税人识别号"
                v-model="enterprise.nashui"
                :disabled="!edits"
              ></el-input>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="bottom">
      <el-button type="primary" size="medium" @click="add()" v-if="edits==true">确定</el-button>
      <el-button type="info" size="medium" @click="revert()">返回</el-button>
    </div>
  </div>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      edit: "",
      pgTitle: "新增",
      // messlist: [{ key: "", value: "" }], //qita其他信息
      edits: true,
      enterprise: {
        id: 0,
        adress: "",
        contacts: "",
        contactsPhone: "",
        createonTime: "",
        createonUserid: "",
        debtAllmoney: "",
        debtExpire: "",
        debtNotDue: "",
        orderMoney: "",
        enterpriseName: "",
        enterpriseNumber: "",
        hezuoStatus: "",
        hezuoYear: "",
        jop: "",
        xinyongMoney: "",
        kaipiaoContacts: "",
        kaipiaoContactsphone: "",
        kaipiaoDanwei: "",
        kaipiaoKaihuaccount: "",
        kaipiaoKaihuhang: "",
        nashui: "",
      },
      Mark: 0,
      userId: 0,
      options: [{
        value: '合作中',
        label: '合作中'
      }, {
        value: '未合作',
        label: '未合作'
      }],
    };
  },
  created() {


    this.userId = JSON.parse(localStorage.getItem("message")).Id;
    this.edit = this.$route.query.edit;
    if (this.$route.query.id) {
      if (this.edit == 1) {
        this.pgTitle = "客户详情";
        this.edits = false;
      } else {
        this.pgTitle = "编辑客户";
        this.edits = true;
      }
      this.getDat(this.$route.query.id);
    } else {
      this.pgTitle = "新增客户";
      this.edits = true;
    }
  },
  methods: {
    getDat(id) {
      axios(
        "/JX_java/sales/clientMessage/getUserClientDetails?cmId=" +
        this.$route.query.id
      ).then((res) => {
        let result = res.data.data;
        this.enterprise = result;
      });
    },
    add() {
      if (this.Mark == 0) {
        if (this.enterprise.enterpriseNumber == "") {
          this.$message.error("请输入企业编号");
          return;
        }
        if (this.enterprise.adress == "") {
          this.$message.error("请输入地址");
          return;
        }
        if (this.enterprise.contacts == "") {
          this.$message.error("请输入联系人");
          return;
        }
        if (this.enterprise.contactsPhone == "") {
          this.$message.error("请输入联系人电话");
          return;
        }
        if (this.enterprise.enterpriseName == "") {
          this.$message.error("请输入企业名称");
          return;
        }

        if (this.enterprise.hezuoStatus == "") {
          this.$message.error("请输入合作状态");
          return;
        }
        if (this.enterprise.hezuoYear == "") {
          this.$message.error("请输入合作年限");
          return;
        }
        if (this.enterprise.jop == "") {
          this.$message.error("请输入联系人职务");
          return;
        }
        if (
          this.enterprise.kaipiaoContacts == "" &&
          this.enterprise.kaipiaoContactsphone == "" &&
          this.enterprise.kaipiaoDanwei == "" &&
          this.enterprise.kaipiaoKaihuaccount == "" &&
          this.enterprise.kaipiaoKaihuhang == "" &&
          this.enterprise.nashui == ""
        ) {
          this.$message.error("请补齐开票信息");
          return;
        }
        const arr = {
          adress: this.enterprise.adress,
          contacts: this.enterprise.contacts,
          contactsPhone: this.enterprise.contactsPhone,
          createonUserid: 1,
          debtAllmoney: this.enterprise.debtAllmoney,
          debtExpire: this.enterprise.debtExpire,
          debtNotDue: this.enterprise.debtNotDue,
          enterpriseName: this.enterprise.enterpriseName,
          enterpriseNumber: this.enterprise.enterpriseNumber,
          hezuoStatus: this.enterprise.hezuoStatus,
          hezuoYear: this.enterprise.hezuoYear,
          id: this.enterprise.id,
          jop: this.enterprise.jop,
          kaipiaoContacts: this.enterprise.kaipiaoContacts,
          kaipiaoContactsphone: this.enterprise.kaipiaoContactsphone,
          kaipiaoDanwei: this.enterprise.kaipiaoDanwei,
          kaipiaoKaihuaccount: this.enterprise.kaipiaoKaihuaccount,
          kaipiaoKaihuhang: this.enterprise.kaipiaoKaihuhang,
          nashui: this.enterprise.nashui,
          orderMoney: this.enterprise.orderMoney,
          status: "1",
          xinyongMoney: this.enterprise.xinyongMoney,
        };
        axios
          .post(
            "/JX_java/sales/clientMessage/addClientMessage?userId=" +
            this.userId,
            arr
          )
          .then((res) => {
            if (res.data.data == "操作成功") {
              this.$message.success(res.data.data);
              this.$router.go(-1);
            } else {
              this.$message.error(res.data.data);
            }
          });
      }
    },

    // 新增消息
    // opermess(mark, index) {
    //   if (mark == true) {
    //     this.messlist.push({ key: "", value: "" });
    //   } else {
    //     this.messlist.splice(index, 1);
    //   }
    // },

    //返回
    revert() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/base.scss";

.bigbox {
  width: 98%;
  margin-left: 20px;
}

.nav {
  //border: solid 1px red;
  height: 60px;
  padding: 0 1%;
  position: relative;

  p {
    height: 40px;
    margin: 10px 0;
    line-height: 40px;

    span {
      background: $Header_color;
      color: $Header_color;
    }
  }

  #nav_go4 {
    position: absolute;
    top: 10px;
    right: 1%;

    img {
      height: 16px;
      padding-right: 10px;
    }
  }
}

.customerxq_box1 {
  background: $white;
  height: 220px;
  width: 98%;
  padding: 0 1%;
  font-size: 14px;

  p {
    font-weight: bold;
    height: 40px;
    padding-top: 10px;
  }

  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    li {
      width: 33%;
      margin-top: 10px;
      text-align: center;

      span {
        display: inline-block;
        width: 30%;
      }
    }
  }
}

.customerxq_box2 {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: $fontcolor;


  .box2_left_top {
    width: 100%;
    background: $white;
    height: 280px;
    padding-left: 1%;
    //width: 49%;
    //   border: solid 1px red;
    p {
      font-weight: bold;
      height: 40px;
      padding-top: 10px;
    }

    ul {
      width: 98%;
      display: flex;
      flex-wrap: wrap;
      padding: 0 1%;

      li {
        width: 33%;
        margin-top: 10px;
        text-align: center;

        span {
          display: inline-block;
          width: 25%;
        }
      }
    }

    .nashuiren {
      padding-top: 20px;
      margin-left: 50px;

      span {
        display: inline-block;
        //width: 10%;
        margin-left: 8px;
        margin-right: 21px;
      }
    }
  }

  .box2_left_bottom {
    background: $white;
    // margin-top: 10px;
    padding-left: 1%;
    height: 280px;
    width: 48%;

    .box2_header {
      padding-top: 10px;
      padding-bottom: 20px;
      display: flex;
      justify-content: space-between;

      .el-button {
        margin-right: 10px;
      }
    }
  }
}

.bottom {
  padding-top: 20px;
  text-align: center;
}
</style>
